<template>
  <div v-if="!repoUrl">loading</div>
  <div v-else>most star repo is <a :href="repoUrl">{{ repoName }}</a></div>
</template>

<script>
import axios from 'axios'

export default {
  name: "App",
  data() {
    return {
      repoUrl: '',
      repoName: ''
    }
  },
  mounted() {
    /*
       发ajax请求获取数据
       1. 使用vue的插件vue-resource：
        安装：npm install vue-resource --save
        在main.js中声明使用
        在线文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
       2. 使用axios
        1.安装：npm install axios --save
        2. 引入
     */
    const url = 'https://api.github.com/search/repositories?q=vu&sort=stars'
    /*this.$http.get(url).then(
      response => {
        // 成功处理逻辑
        const result = response.data
        const mostRepo = result.items[0]
        this.repoUrl = mostRepo.html_url
        this.repoName = mostRepo.name
      },
      response => {
        // 失败处理
        alert('请求失败')
      }
    )*/
    // 使用axios发送请求
    axios.get(url).then(response => {
      // 成功处理逻辑
      const result = response.data
      const mostRepo = result.items[0]
      this.repoUrl = mostRepo.html_url
      this.repoName = mostRepo.name
    }).catch(error=>{
      // 失败处理
      alert('请求失败')
    })
  }
}
</script>

<style scoped>

</style>
